<!--
 * @Author       : wfl
 * @LastEditors: qiye
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-04-26 17:57:39
 * @LastEditTime: 2023-08-14 13:40:44
-->
<script setup lang="ts" name="AdvanceSetting">
import { useLoadEditData } from '@main/views/approve-workflow/ApproveConfig/load-edit-data'
import { advanceApi } from '@main/apis/approve-center'
import PrintConfig from './PrintConfig.vue'
// 从 views/approve-workflow/ApproveConfig/Tabs/TabForm
const sureToPublish: any = inject('sureToPublish')

const { handEditFlow } = useLoadEditData()

// const subTitles = {
//   flow: [
//     { slot: '1', title: '自动去重' },
//     { slot: '2', title: '允许加签' },
//     { slot: '3', title: '撤销/修改审批单' },
//     { slot: '4', title: '审批意见' },
//     { slot: '5', title: '允许代他人提交' },
//     { slot: '6', title: '超时未处理提醒' }
//   ]
// }

// const { baseUrl } = useHttpUrl()
const token = useToken()
const flowStore = useFlowStore()
const advanceInfo = computed<{ reportTemplateId: string; }>(() => flowStore.design.advance)
const { msgError } = useMessage()
// 枚举映射
// const AdvanceApproveType = EAdvanceApproveType
// const showPicker = ref(false)
// const handSelectPerson = () => {
//   showPicker.value = true
// }

const activePane = ref<string>('print')

/** 打印设置 start */
const printState = reactive({
  id: '',
  editConfirmDialog: false,
  confirmed: false
})
const printMethods = {

  bindForm: async (formId: string, reportTemplateId: string) => {
  // 保存
    const param: { formId: string; reportTemplateId: string; } = {
      formId,
      reportTemplateId
    }

    const { success, msg } = await advanceApi.bindReportTemplate(param)
    if (success) {
      // ElMessage.success(msg)
    }
    else {
      console.error(msg)
    }
  },
  handleCreated: (id: string) => {
    printState.id = id
  },
  handleEditClick: () => {

  },
  confirmEdit: async () => {
    const ret = await sureToPublish(false)
    if (!ret.success)
      return
    try {
      // 如果是第一次设置模板，打印配置组件去创建模板，如果是修改模板，则调用后端接口，生成新的模板
      if (advanceInfo.value?.reportTemplateId) {
        // TODO 调用迁移报表模板数据
        const tempId = advanceInfo.value?.reportTemplateId
        const { success, msg, data } = await advanceApi.migrateJmreport(tempId)
        if (success) {
          await printMethods.bindForm(ret.data, data)
          printState.id = data
        }
        else {
          msgError(msg)
        }
      }
      else {
        printState.id = ''
      }
      await handEditFlow({ id: ret.data }, false)
    }
    catch (e: any) {
      console.error(e)
    }
    printState.confirmed = true
    flowStore.design.advance.isPrintTemplateEdit = true
  },
  getId: () => printState.id
}
/** 打印配置 end */

defineExpose({
  getPrintId: printMethods.getId
})
</script>

<template>
  <div class="ikflow-flow-advance-setting iflow-content-main">
    <el-card>
      <!-- <el-tabs v-model="activePane" tab-position="left"> -->
      <!-- TODO Feture -->
      <!-- <el-tab-pane name="flow" label="流程设置">
          <IkTitle title="流程设置" :sub-title="subTitles.flow">
            <template #1>
              <el-form :model="advanceInfo" label-width="0px">
                <ul>
                  <li>
                    <div class="inline-switch">
                      <p>1、同一审批人在流程中多次出现时，自动去重</p>
                      <el-switch v-model="advanceInfo.approveDistinct" />
                    </div>
                    <Transition>
                      <div style="height: 100%; width: 100%;">
                        <el-form-item
                          v-if="advanceInfo.approveDistinct"
                          label=""
                        >
                          <el-radio-group
                            v-model="advanceInfo.approveDistinctType"
                          >
                            <el-radio
                              class="w-full"
                              :label="AdvanceApproveType.保留第一个"
                            >
                              在流程中出现多次时，仅保留第一个
                            </el-radio>
                            <el-radio
                              class="w-full"
                              :label="AdvanceApproveType.自动去重"
                            >
                              仅在连续出现时，自动去重
                            </el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </div>
                    </Transition>
                  </li>
                  <li>
                    <div class="inline-switch">
                      <p>2、审批人和发起人是同一个人，审批自动通过</p>
                      <el-switch
                        v-model="advanceInfo.sameApproveSponsorAutoPass"
                      />
                    </div>
                  </li>
                </ul>
              </el-form>
            </template>
            <template #2>
              <div class="inline-switch">
                <p>开启后审批单可以新增临时审批人</p>
                <el-switch v-model="advanceInfo.allowAddApprove" />
              </div>
            </template>
            <template #3>
              <el-checkbox v-model="advanceInfo.allowRevokePassedApprove">
                允许提交人撤销
                <el-input-number
                  v-model="advanceInfo.allowRevokeTime"
                  :min="1"
                  @click.prevent
                />
                天内已通过的审批单
              </el-checkbox>
              <el-checkbox v-model="advanceInfo.allowRevokeApproving">
                允许提交人撤销审批中的审批单（最多90天）
              </el-checkbox>

              <el-checkbox v-model="advanceInfo.allowModifyPassedApprove">
                允许修改
                <el-input-number
                  v-model="advanceInfo.allowModifyTime"
                  :min="1"
                  @click.prevent
                />
                天内提交并通过的审批（最多允许修改1次）
              </el-checkbox>
            </template>
            <template #4>
              <el-checkbox v-model="advanceInfo.approveOpinionRequired">
                必须填写意见方可提交审批
              </el-checkbox>
              <el-input
                v-model="advanceInfo.approveOpinion"
                clearable
                placeholder="审批意见填写提示"
              />
              <el-checkbox v-model="advanceInfo.approveCommentInvisible">
                评语仅管理员和审批人可见
              </el-checkbox>
            </template>
            <template #5>
              <el-checkbox v-model="advanceInfo.allowSubmitByOther">
                指定人员可代他人提交审批
              </el-checkbox>
              <template v-if="advanceInfo.allowSubmitByOther">
                <OrgItems v-model="advanceInfo.otherPerson" />
                <el-button type="primary" text @click="handSelectPerson">
                  添加
                </el-button>
              </template>
            </template>
          </IkTitle>
        </el-tab-pane>
        <el-tab-pane name="show" label="展示设置" />
        <el-tab-pane name="remind" label="提醒设置" />
        <el-tab-pane name="print" label="打印设置">
          <div class="setting-box-right">
            <PrintConfig :id="printState.id" :token="token" @created="printMethods.handleCreated" />
          </div>
        </el-tab-pane>
      </el-tabs> -->
      <div class="box-setting">
        <div class="box-setting-left">
          <el-button
            text
            class="box-setting-left__item"
            :bg="activePane === 'print'"
            :class="{ 'box-setting-left__item--selected': activePane === 'print' }"
            @click="activePane = 'print'"
          >
            打印设置
          </el-button>
        </div>
        <div class="box-setting-right">
          <el-popconfirm
            v-if="!printState.confirmed"
            width="300px"
            title="发布后才可以自定义打印模板，确定发布吗？"
            @confirm="printMethods.confirmEdit"
          >
            <template #reference>
              <el-button type="text" @click="printMethods.handleEditClick">编辑打印模板</el-button>
            </template>
          </el-popconfirm>
          <!-- src-prefix="http://192.168.2.45:6002" -->
          <PrintConfig
            v-if="activePane === 'print' && printState.confirmed"
            :id="printState.id"
            src-prefix="http://192.168.2.45:6002"

            :token="token"
            @created="printMethods.handleCreated"
          />
        </div>
      </div>
      <!-- </el-tabs> -->
    </el-card>

    <!-- <el-button @click="activePane = 'print'" style="width: 100%">打印设置</el-button> -->
    <!-- <IkingPicker
      ref="refIkingPicker"
      v-model="advanceInfo.otherPerson"
      v-model:show="showPicker"
      :api="{
        methods: 'post',
        url: `${baseUrl}/server/component/pick/mix`,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          'Authorization': token,
        },
      }"
      :tabs="['group']"
      :choose-type="['user']"
      :type-option="{
        dep: 'DEPT',
        user: 'USER',
        role: 'ROLE',
        post: 'POST',
      }"
      :prop-option="{
        name: 'elementName',
        id: 'elementId',
        type: 'elementType',
      }"
    /> -->
  </div>
</template>

<style lang="scss" scoped>
.ikflow-flow-advance-setting {
  height: 100%;
  width: 100%;

  p,
  ul {
    margin: 0;
    padding: 0;
  }

  :deep(.el-card__body) {
    height: 100%;
    padding: 0;

    .el-tabs--left {
      height: 100%;
      text-align: center;

      .el-tabs__content,
      .el-tabs__nav-scroll {
        padding: 32px 0;
      }

      .el-tabs__content {
        padding: 32px 10px 32px 0;
      }

      .el-tabs__item.is-active {
        background: var(--el-border-color-light);
        font-weight: 600;
      }

      .el-tabs__item.is-left {
        text-align: center;
      }

      .el-tabs__nav-scroll {
        width: 180px;
      }
    }

    ul {
      list-style: none;

      .el-form-item {
        margin-bottom: 0;
      }
    }

    .inline-switch {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .box-setting{
    padding-top: 0;
    display: flex;

    .box-setting-left{
      width: 200px;
      flex-basis: 200px;
      position: relative;
      border-right: 1px solid var(--el-border-color-light);

      .box-setting-left__item{
        width: calc(100% + 2px);
        border-radius: 0;
        position: relative;
        left: 0;
        right: -2px;
      }

      .box-setting-left__item--selected {
        border-right: 4px solid var(--el-color-primary);
      }
    }

  .box-setting-right{
    padding-left: 8px;
    height: calc(100vh - 190px);
    flex-grow: 1;

  }
  }

}
</style>
